<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
    width: 600px;
    height: 400px;
  }
  </style>
</head>
<body>
  <div id="paper"></div>
  <img id="recordGif"/>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <script src="/js/spritejs.js"></script>
  <script src="/js/gif.js"></script>
  <script>

  ;(async function(){
    const paper = spritejs.Paper2D('#paper', 600, 400)
    const Sprite = spritejs.Sprite,
          Path = spritejs.Path

    const s4 = new Path()

    s4.attr({
      anchor: [0, 0],
      pos: [300, 100],
      //size: [200, 200],
      //bgcolor: '#ddd',
      //color: 'red',
      //renderMode: 'fill',
      lineWidth: 6,
      lineCap: 'round',
      d: 'M10,80 q140,-50 160,0',
      //d: 'M10 80 h260 v206 h-260Z',
      linearGradients: {
        strokeColor: {
          //direction: 90,
          //rect: [0, 0, 100, 100],
          vector: [10, 30, 180, 90],
          colors: [{
            offset: 0,
            color: 'rgba(255,0,0,0)',
          }, {
            offset: 1,
            color: 'rgba(255,0,0,0)',
          }]
        },
      }  
    })
    
    paper.layer().append(s4)
    window.s4 = s4

    const a1 = new Animator(3000,  p => {
      let q = 0

      if(p > 0.618) {
        q = 1 - (1 - p) / 0.382
      }

      p = Math.min(p / 0.7, 1)

      const colors = [
        {offset: 0, color: 'rgba(255,0,0,0)'},
        {offset: q, color: 'rgba(255,0,0,0)'},
        {offset: p, color: 'rgba(255,0,0,1)'},
        {offset: Math.min(p + 0.06, 1), color: 'rgba(255,0,0,0)'},
      ]
      
      const linearGradients = s4.attr('linearGradients')
      linearGradients.strokeColor.colors = colors

      const len = s4.getPathLength()
      const [x, y] = s4.getPointAtLength(p * len)

      linearGradients.strokeColor.vector = [10, 30, x + 5, y]

      s4.attr({linearGradients})
    })

    window.s4 = s4

    do {
      await a1.animate()
    }while(1)
  })()
  </script>
</body>
</html>